<template>
  <view class="cart-page">
    <view class="cart-list">
      <view 
        v-for="(item, index) in cartItems" 
        :key="index"
        class="cart-item"
      >
        <image :src="item.image" class="item-image" mode="aspectFill"></image>
        <view class="item-info">
          <text class="item-name">{{item.name}}</text>
          <text class="item-price">¥{{item.price.toFixed(2)}}</text>
        </view>
        <view class="item-action">
          <button class="action-btn minus" @click="updateCount(index, -1)">-</button>
          <text class="action-count">{{item.count}}</text>
          <button class="action-btn plus" @click="updateCount(index, 1)">+</button>
        </view>
      </view>
    </view>
    
    <view class="cart-footer">
      <text class="total-text">共 {{totalCount}} 件 合计:</text>
      <text class="total-price">¥{{totalPrice.toFixed(2)}}</text>
      <button class="submit-btn" @click="submitOrder">提交订单</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cartItems: [] // 购物车商品列表
    }
  },
  computed: {
    // 总数量
    totalCount() {
      return this.cartItems.reduce((total, item) => total + item.count, 0)
    },
    // 总金额
    totalPrice() {
      return this.cartItems.reduce((total, item) => total + item.price * item.count, 0)
    }
  },
  onLoad(options) {
    if (options.data) {
      this.cartItems = JSON.parse(decodeURIComponent(options.data))
    }
  },
  methods: {
    // 更新商品数量
    updateCount(index, num) {
      const newCount = this.cartItems[index].count + num
      if (newCount <= 0) {
        this.cartItems.splice(index, 1)
      } else {
        this.cartItems[index].count = newCount
      }
    },
    
    // 提交订单
    submitOrder() {
      if (this.cartItems.length === 0) {
        uni.showToast({
          title: '购物车为空',
          icon: 'none'
        })
        return
      }
      
      // 构建订单数据
      const order = {
        id: Date.now().toString(),
        items: this.cartItems,
        total: this.totalPrice,
        createTime: new Date().toISOString(),
        status: 1 // 1-待支付
      }
      
      // 保存订单数据（实际项目中应该提交到服务器）
      try {
        const orders = uni.getStorageSync('orders') || []
        orders.unshift(order)
        uni.setStorageSync('orders', orders)
      } catch (e) {
        console.error('保存订单失败:', e)
      }
      
      // 跳转到订单确认页面
      uni.navigateTo({
        url: `/pages/index/confirm?id=${order.id}`
      })
    }
  }
}
</script>

<style scoped>
.cart-page {
  padding-bottom: 60px;
}

.cart-list {
  padding: 10px;
}

.cart-item {
  display: flex;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.item-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
}

.item-info {
  flex: 1;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-name {
  font-size: 16px;
  font-weight: bold;
}

.item-price {
  color: #1296db;
  font-weight: bold;
}

.item-action {
  display: flex;
  align-items: center;
}

.action-btn {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  font-size: 16px;
  padding: 0;
}

.action-btn.plus {
  background: #1296db;
  color: #fff;
}

.action-btn.minus {
  border: 1px solid #1296db;
  color: #1296db;
  background: #fff;
}

.action-count {
  margin: 0 10px;
  min-width: 20px;
  text-align: center;
}

.cart-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
}

.total-text {
  color: #666;
  margin-right: 5px;
}

.total-price {
  flex: 1;
  color: #1296db;
  font-weight: bold;
}

.submit-btn {
  background: #1296db;
  color: #fff;
  border-radius: 20px;
  padding: 8px 20px;
}
</style>